import React from 'react'
import { List, Switch } from 'antd-mobile'
import { useNavigate, useSearchParams } from 'react-router-dom'
import { Button, Input, Form, Picker, Dialog, } from 'react-vant'
import { Image, NavBar, Toast } from '@nutui/nutui-react'
import '@nutui/nutui-react/dist/style.css'
import { Share, More, Cart, ArrowLeft, Close } from '@nutui/icons-react'
import { SideBar, NumberKeyboard, PasscodeInput, Space } from 'antd-mobile'
import { useState } from 'react'
export default function Paypwd() {
    const [pwd, setPwd] = useState('')
    const [flag, setFlag] = useState(false)

    const onInput = v => Toast.info(`输入${v}`)
    const onDelete = () => Toast.info('删除')
    let navigate = useNavigate()


    const [error, setError] = useState(false)

    const onChange = (value) => {
        setError(value.length >= 6)
    }

    const nextpwd = () => {
        Toast.show('密码设置成功')
        navigate('/contmain')

    }

    return (
        <div id='paypwd'>
            <div className="top">
                <NavBar
                    style={{ backgroundColor: '#FFFFFF' }}
                    back={
                        <>
                            <ArrowLeft />
                            返回
                        </>
                    }
                    onBackClick={() => { navigate(-1) }}
                >
                    设置新手机号
                </NavBar>
                {/* <ArrowLeft></ArrowLeft> */}
            </div>
            <div className="cen">
                <p style={{ fontSize: '0.5333rem', fontWeight: 'bold', marginLeft: '100px' }}>设置6位数字支付密码</p>
                <PasscodeInput onClick={(e) => { setPwd(e) }} plain keyboard={<NumberKeyboard />} />

                <Button onClick={() => { nextpwd() }} round nativeType='submit' style={{ backgroundColor: '#2D83FB', color: 'white', width: '8rem', marginLeft: '0.9rem', marginTop: '0.2667rem' }} block>下一步</Button>

                {/* <PasswordInput length={4}  onSubmit={onSubmit} /> */}
                {/* <p onClick={()=>{setFlag(true)}}>666</p> */}
                {/* <Cell title='弹出默认键盘' isLink onClick={() => setFlag( true )} /> */}
                {/* <NumberKeyboard
                    visible={flag}
                    onBlur={() => set(false)}
                    onInput={onInput}
                    onDelete={onDelete}
                /> */}
            </div>
        </div>
    )
}
